<template>
<view 
	class="login" 
	:style="{
		backgroundImage:`url(${imageUrl})`
	}">
	<!-- <view class="logo">
		<cover-image class="controls-play img" src="../../static/img/logo.png"></cover-image>
	</view>
	<view class="other-container">
		<view class="title">项目管理系统</view>
		<view class="info">project management system</view>
	</view> -->
	<view class="container">
		<u-form 
			:model="form" ref="uForm">
			<u-form-item 
				label="账号" 
				prop="name" 
				:border-bottom="false" 
				label-position="top">
				<u-input 
					v-model="form.name" 
					placeholder="请输入账号" 
					:clearable='false'/>
			</u-form-item>
			<u-form-item 
				label="密码" 
				prop="password" 
				:border-bottom="false" 
				label-position="top">
				<u-input 
					v-model="form.password" 
					type="password" 
					placeholder="请输入密码" 
					:clearable='false'/>
			</u-form-item>
		</u-form>
		<u-button
			class="login-bt"
			@click="submit" 
			type="success" 
			:ripple="true"
			:loading="loading">
			登陆
		</u-button>
	</view>
	<u-toast ref="uToast"/>
</view>
</template>

<script>
import {getLoginState,login} from "@/common/Api";
export default {
	data() {
		return {
			imageUrl:'https://project.src-code.com.cn:8685/api/wx0/image?f=appbg.png',
			form: {
				name: '',
				password: '',
			},
			rules: {
				name: [{
					required: true,
					message: '请输入账号',
					trigger: ['change', 'blur'],
				}],
				password: [{
					required: true,
					message: '密码不能为空',
					trigger: ['change', 'blur'],
				}]
			},
			loading: false, //登陆等待动画
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	created() {
		this.loading = true;
		getLoginState().then(res=>{
			if (res.data.state == 200) {
				uni.switchTab({
					url: '/pages/home/home',
				});
			}
		}).catch(()=>{
			return;
		}).finally(()=>{
			this.loading = false;
		});
	},
	methods: {
		submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					this.loading = true;
					login(
						{
							username: this.form.name,
							password: this.form.password,
						}
					).then(res=>{
						this.$my_global.admin = res.data.data;
						this.$refs.uToast.show({
							title: '登录成功',
							type: 'success',
						});
						this.$storageObj.token = res.data.data.ssid;
						this.$storageObj.lastTime = res.data.data.lastTime;
						this.$storageObj.username = this.form.name;
						this.$storageObj.nickName = res.data.data.nickname;
						uni.switchTab({
							url: '/pages/home/home',
						});
					}).catch((res)=>{
						this.form.password = "";
						this.$refs.uToast.show({
							title: res.data.msg,
							type: 'error',
						});
					}).finally(()=>{
						this.loading = false;
					});
				} else {
					return;
				}
			});
		},
	},
}
</script>

<style lang="scss" scoped>
.login {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0px 0px;
	transition: filter 0.5s;
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	>.logo{
		width: 60%;
		position: absolute;
		top: 60px;
		left: 15px;
		image{
			height: 60px;
			width: 50%;
		}
	}
	>.other-container{
		>view{
			text-align: center;
			color: #131313;
			background: linear-gradient(0deg, #017BBC 0%, #7CB1F3 50%, #017BBC 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-weight: bold;
		}
		>.title{
			font-size: 40px;
			font-family: HelloFont WenYiHei;
		}
		>.info{
			margin-top: 15px;
			font-size: 20px;
		}
	}
	.container{
		z-index: 999;
		width: 80vw;
		margin-top: 60px;
		height: fit-content;
		box-shadow: 0px 16px 31px 1px rgba(77, 124, 207, 0.5);
		background-color: #ffffff78;
		border-radius: 5px;
		padding: 10px 20px;
		/deep/.u-form-item{
			color: #000000;
		}
		/deep/.u-input{
			padding: 3px 10px !important;
			border-radius: 5px;
			background-color: #f2f3f5;
		}
		/deep/.u-btn {
			margin: 20px 0;
			padding: 10px 0;
		}
		.login-bt{
			/deep/button{
				background: linear-gradient(0deg, #017BBC, #7CB1F3);
				box-shadow: 0px 16px 31px 1px rgba(51, 111, 215, 0.5);
				padding: 25px;
			}
		}
	}
}
</style>
